<!DOCTYPE html>
<html lang="">
<head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>HR助理</title>
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="icon" href="logo.png" type="image/x-icon">
<link rel="shortcut icon" href="logo.png" type="image/x-icon">
<link href="https://lowcode.magicalcoder.com/magicalcoder/assets/drag/ui/magicalcoder/1.1.0/magicalcoder.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.3/json3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/extension/dataTool.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/layui-src@2.4.5/dist/layui.all.js"></script>
<script src="https://www.magicalcoder.com/assets/js/common.js"></script>
<script src="https://lowcode.magicalcoder.com/magicalcoder/assets/drag/ui/magicalcoder/1.1.0/magicalcoder.js"></script>
<style>

</style>

</head>
<body  class="layui-form" style="">
<div id="magicalDragScene" class="mc-root mc-ui-absolute-pane">
	<ul class="layui-nav layui-nav-tree layui-nav-side" style="position: absolute; left: 0%; top: 10%; width: 10%; background-attachment: scroll; height: 116.4%; z-index: 1;">
		<li class="layui-nav-item">
			<a style="font-size: 13px;" href="javascript:void(0)" onclick="document.getElementById('innerhtml').src='table.html'">员工档案</a>
		</li>
		<li id="uuiddbd3acfa-ee39-4b18-9c88-472c72a3f88a" class="layui-nav-item">
			<a style="font-size: 13px;" href="javascript:;">个人信息</a>
			<dl class="layui-nav-child">
				<dd>
					<a>地址1</a>
				</dd>
				<dd>
					<a>地址2</a>
				</dd>
			</dl>
		</li>
		<li id="uuidd332da6c-01cc-42ee-b3e6-b5c5f975c798" class="layui-nav-item">
			<a style="font-size: 13px;">登录/登出</a>
			<dl class="layui-nav-child">
				<dd>
					<a>地址1</a>
				</dd>
				<dd>
					<a>地址2</a>
				</dd>
			</dl>
		</li>
	</ul>
	<ul class="layui-nav" style="position: absolute; left: 0%; top: 0%; width: 100%; height: 10%; background-attachment: scroll; z-index: 1;">
		<li class="layui-nav-item" style="position: absolute; left: 7%; top: 5%;">
			<a>HR经理</a>
		</li>
		<li class="layui-nav-item mc-ui-flex-end " style="position: absolute; left: 90%; top: 0%; height: 100%;">
			<a href="login" >安全登出</a>
		</li>
		<li id="uuidffe06286-621c-4c0d-babc-e7a8b6a5a7e4" class="layui-nav-item mc-ui-flex-end" style="position: absolute; left: 80%; top: 5%;">
			<a href="javascript:;">欢迎</a>
		</li>
	</ul>
	<img id="img" style="width: 3%; position: absolute; left: 1%; top: 1%; z-index: 3;" src="logo.png"/>
	<div>
		<iframe id="innerhtml" style="position: absolute; left: 10%; top: 10%; width: 90%; height: 116.4%; background-attachment: scroll;" src="table.html" frameborder="0"></iframe>
	</div>
	<a class="layui-btn" style="position: absolute; left: 90%; top: 5%; z-index: 2; opacity: 0; background-color: rgb(0, 0, 0);">按钮</a>
</div>
<script>

//以下脚本为标签属性转换成layui组件的还原过程
//调试:打开浏览器控制台(F12),在代码中某行增加 debugger 即可调试
var $ = layui.jquery, laytpl = layui.laytpl, laydate = layui.laydate, form = layui.form, layedit = layui.layedit, slider = layui.slider, element = layui.element, colorpicker = layui.colorpicker, upload = layui.upload, rate = layui.rate, carousel = layui.carousel, table = layui.table, flow = layui.flow;
var magicalDragLayuiUtil = {
    rebuildLayUiControls: function () {
        var _t = this;
        //日期
        $(".magicalcoder-laydate").each(function (idx, item) {
            laydate.render(_t.iteratorAttr({
                elem: item
            }, item));
        })
        //富文本
        $(".magicalcoder-layedit").each(function (idx, item) {
            var mcDataId = $(item).attr("id");
            if (mcDataId) {
                layedit.build(mcDataId, {
                    height: 300
                });
            }
        })
        //外键
        $(".magicalcoder-foreign-select2").each(function (idx, item) {
            var mcDataId = $(item).attr("id");
            if (mcDataId) {
                $("#" + mcDataId).select2({
                    allowClear: true,
                    width: "150px",
                    delay: 500,
                });
            }
        })
        //颜色选择器
        $(".magicalcoder-color-picker").each(function (idx, item) {
            colorpicker.render(_t.iteratorAttr({
                elem: $(item)}, item));
        })
        //上传组件
        $(".magicalcoder-layupload").each(function (idx, item) {
            upload.render(_t.iteratorAttr({
                elem: $(item)}, item));
        })
        //滑块
        $(".magicalcoder-slider").each(function (idx, item) {
            slider.render(_t.iteratorAttr({
                elem: $(item)}, item));
        })
        //评分
        $(".magicalcoder-rate").each(function (idx, item) {
            rate.render(_t.iteratorAttr({
                elem: $(item)}, item));
        })
        //轮播
        $(".layui-carousel").each(function (idx, item) {
            carousel.render(_t.iteratorAttr({
                elem: $(item)}, item));
        })
        //流加载
        $(".magicalcoder-flow").each(function (idx, item) {
            flow.load(_t.iteratorAttr({
                elem: $(item)}, item));
        })
        //代码
        $(".magicalcoder-code").each(function (idx, item) {
            layui.code(_t.iteratorAttr({
                elem: $(item)}, item));
        })
        //弹窗
        $(".magicalcoder-layer").each(function (idx, item) {
            //先隐藏起来
            $(this).next().hide();
            $(this).click(function () {
                var config = _t.iteratorAttr({
                    elem: $(item)}, item);
                var type = config.type;
                if (type + '' == 1) {
                    config.content = $(this).next();
                   if (!config.content.hasClass("magicalcoder-layer-content")) {
                        config.content = config.content.find(".magicalcoder-layer-content")
                    }                }
                if (config.btn) {
                    config.btn = config.btn.split(",")
                }
                if (config.area) {
                    config.area = config.area.split(",")
                }
                layer.open(config)
            })
        })
        //动态表格 我们单独封装了layui-table的初始化方式 至于数据排序 返回格式 等操作请根据你的具体环境自行封装
        $(".magicalcoder-table").each(function (idx,
            item) {
            var cols = [];
            //读取列配置
            $(this).find(".magicalcoder-table-th").each(function (i, th) {
                cols.push(_t.iteratorAttr({
                    title: $(this).text()}, th));
            })
            var tableConfig = _t.iteratorAttr({
                elem: $(item),
                cols: [cols]},
                item);
            //初始化表格 至于返回的数据格式 您可以根据自己的系统自行改造 这里仅做一个示例 参考js\\data\\list.json
            table.render(tableConfig);
        })
        //部分组件初始化
        element.init();
        //表单初始化
        form.render();
    },
    //将标签上的属性 转换成layui函数初始化时的参数名:参数值
    iteratorAttr: function (renderConfig, dom) {
        var attrs = dom.attributes;
        for (var i = 0; i < attrs.length; i++) {
            var attr = attrs[i];
            var name = attr.name;
            var value = attr.value;
            if (name.indexOf("mc-") === 0) {
                name = name.replace("mc-attr-", '');
                name = name.replace("mc-event-", '');
                if (name.indexOf('str-') === 0) {
                    name = name.replace('str-', '');
                } else if (name.indexOf('bool-') === 0) {
                    name = name.replace('bool-', '');
                    value == 'true' || value === '' ? value = true: value = value;
                    value == 'false' ? value = false: value = value;
                } else if (name.indexOf('num-') === 0) {
                    name = name.replace('num-', '');
                    if (value !== '' && !isNaN(value)) {
                        value = parseFloat(value);
                    }
                } else if (name.indexOf('json-') === 0) {
                    name = name.replace('json-', '');
                    if (value !== '') {
                        value = JSON.parse(value);
                    }
                }
                renderConfig[this.htmlAttrNameToTuoFeng(name)] = value;
            }
        }
        return renderConfig;
    },
    //user-name -> userName html上的标签名转换成驼峰名称
    htmlAttrNameToTuoFeng: function (name) {
        var arr = name.split("-");
        var newArr = []
        for (var i = 0; i < arr.length; i++) {
            if (i != 0) {
                if (arr[i] != '') {
                    newArr.push(this.firstCharToUpLower(arr[i]));
                }
            } else {
                newArr.push(arr[i]);
            }
        }
        return newArr.join('');
    },
    //首字母大写
    firstCharToUpLower: function (name) {
        var arr = name.split("");
        arr[0] = arr[0].toUpperCase();
        return arr.join('');
    },
}
magicalDragLayuiUtil.rebuildLayUiControls();
//echarts自动初始化
new McECharts().render();
//functions-begin
//functions-end
</script>
</body>

</html>